<template>
  <div>
    <el-row v-if="extCols.length > 0">
      <el-col :span="span" v-for="extcol in extCols" :key="extcol.extcolName">
        <el-form-item :label="extcol.extcolLabel">
          <el-input
            :value="form[extcol.extcolName]"
            @input="$emit('input', form[extcol.extcolName])"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'ExtColFormItem',
  props: {
    // 被扩展表名
    tableName: {
      type: String,
      require: true
    },
    // 被扩展表名
    span: {
      type: Number,
      require: false,
      default: 24
    },
    // 表单对象
    form: {
      type: Object,
      require: true
    }
  },
  data() {
    return {
      // 扩展字段
      extCols: []
    }
  },
  watch: {
    tableName(newVal, oldVal) {
      console.log('newVal', newVal)
      this.doGetTableExtCol()
    }
  },
  created() {
    this.doGetTableExtCol()
  },
  methods: {
    doGetTableExtCol: function () {
      if (this.tableName) {
        this.getTableExtCol(this.tableName).then((response) => {
          this.extCols = response.data
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
